<template>
  <!-- 折线图、柱形图 -->
  <div :id="chartId" class="chart"></div>
</template>

<script>
import {hexToRgba, resize, spaceTxt, downloadChartImg} from '@/utils/utils'
export default {
  mixins: [resize],
  props: {
    chartId: {
      type: String
    },
    chartData: {
    }
  },
  data() {
    return {
      chart: null,
      graphType: 'bar',
      colors: ['#79e2ff', '#A5F7B9']
    }
  },
  methods: {
    init() {
      let seriesData = this.getSeriesData()
      // 图例
      let legend = {
        type: 'plain',
        show: true,
        left: '2%',
        right: '3%',
        bottom: '3%',
        icon: 'circle',
        textStyle: {
          color: '#6b6c7e'
        },
      }
      // 提示框
      let tooltip = {
        confine: true,
        show: true,
        // trigger: 'axis',
        backgroundColor: "#fff",
        extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
        borderRadius: 0,
        padding: 5,
        textStyle: {
          fontWeight: 'normal',
          color: "#000",
        },
        formatter: (params) => {
          let param = params[0]
          let value = param.data.find(v => v !== param.name && v !== '-')
          let index = param.data.findIndex(v => v !== param.name && v !== '-')
          return `${params[index-1].marker}${param.name}：${value}`
        }
      }
      let option = {
        // 提示框
        tooltip,
        // 图例
        legend,
        // 背景色
        backgroundColor: '#fff',
        // 数据集
        dataset: {
          source: JSON.parse(JSON.stringify(this.chartData))
        },
        xAxis: {
          type: 'category',
          name: 'IPC小类',
          nameTextStyle: {
            color: '#747FD0'
          },
          boundaryGap: true,
          splitLine: {
            show: false,
            lineStyle: {
              color: "#f0f1f3"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#f0f1f3",
              width: 2
            }
          },
          axisLabel: {
            rotate: 40,
            interval: 0,
            margin: 10,
            textStyle: {
              color: "#9e9e9e"
            },
            formatter: (label) => {
              return spaceTxt(label, 8)
            }
          },
        },
        yAxis: {
          type: 'value',
          name: '申请量',
          nameTextStyle: {
            padding: [0, 0, 0, -40],
            color: '#747FD0'
          },
          minInterval: 1,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#f0f1f3"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#f0f1f3",
              width: 2
            }
          },
          axisLabel: {
            textStyle: {
              color: "#9e9e9e"
            }
          }
        },
        series: seriesData
      }
      
      option.tooltip.trigger = 'axis'
      option.grid = {
        top: "40px",
        right: "80px",
        // bottom: "10%",
        left: "3%",
        containLabel: true
      }

      this.chart.setOption(option, true)
    },
    getSeriesData() {
      let seriesData = []
      for (let i=0; i<this.chartData.length; i++) {
        if (this.chartData[i][0] !== 'product') {
          let obj = {
            type: this.graphType,
            id: this.chartData[i][0],
            name: this.chartData[i][0],
            seriesLayoutBy: 'row',
            symbol: 'circle',
            symbolSize: '8',
            connectNulls: true,
            smooth: true,
            scale: true,
            barMaxWidth: 24,
            barGap: '-100%',
            connectNulls: false,
            label: {
              normal: {
                show: true,
                position: 'top',
                color: '#6b6c7e',
                fontSize: 12,
                formatter: (params) => {
                  let value = params.data[params.encode.y[0]]
                  if (value === 0) { // 如果为0，则不展示label
                    value = ''
                  }
                  return value
                }
              }
            },
            universalTransition: true,
            animationDurationUpdate: 1000,
          }
          // if (this.chartConfig.needStack) {
          //   obj['stack'] = 'all'
          // }
          seriesData.push(obj)
        }
      }
      return seriesData
    },
    changeGraphType(type) {
      this.graphType = type
      this.init()
    },
    // 保存图片
    downloadImg() {
      downloadChartImg(this.chart)
    }
  },
  watch: {
    chartData() {
      this.init()
    }
  },
  mounted() {
    this.chart = this.$echarts.init(document.getElementById(this.chartId))
    this.init()
  },
  destroyed() {
    this.chart.dispose()
    this.chart = null
  }
}
</script>

<style lang="scss" scoped>

</style>